<template>
  <div>
    <!-- 工具条 -->
    <div class="root">
      <el-input placeholder="请输入单据号或供应商或备注" class="ipt" />
      <el-select
        v-model="audit"
        placeholder="审单状态"
        style="width: 110px; margin-right: 20px"
      >
        <el-option
          v-for="item in auditoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="status"
        placeholder="付款状态"
        style="width: 110px; margin-right: 20px"
      >
        <el-option
          v-for="item in statusoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span>日期：</span>
      <el-date-picker
        v-model="billDate"
        type="daterange"
        format="YYYY-MM-DD"
        range-separator="~"
        value-format="YYYY-MM-DD"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 320px;;margin-right: 20px"
      />
      <el-button type="primary">查询结果</el-button>

      <!-- 操作条 -->
      <div style="line-height: 40px; height: 40px; text-align: right ;margin-right:20px">
        <el-button size="small" type="primary" @click="add">新增采购单</el-button>
        <el-button size="small">导出</el-button>
        <el-button size="small">打印</el-button>
        <el-button size="small" @click="delPurchase">删除</el-button>
        <el-button size="small">审核</el-button>
        <el-button size="small">反审核</el-button>
      </div>
    </div>
    <!-- 采购列表 -->
    <el-table
      :data="tableData"
      style="width: 100% "
      header-algin="center"
      stripe
      border
      ref="tableDataRef"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="billDate" label="单据日期"  />
      <el-table-column prop="CODE" label="单据编号" />
      <el-table-column prop="supplierName" label="供应商" />
      <el-table-column prop="money" label="购货金额"/>
      <el-table-column prop="lastMoney" label="优惠后金额" />
      <el-table-column prop="pay" label="已付款"  />
      <el-table-column prop="status" label="付款状态"  >
        <template v-slot="{row}">
          <span v-if="row.status==1">待付款</span>
          <span v-else-if="row.status==2">部分付款</span>
          <span v-else>已付款</span>
        </template>

        </el-table-column>
      <el-table-column prop="prepared" label="制单人"  />
      <el-table-column  label="审核人"  />
      <el-table-column label="操作"  >
        <template v-slot="{row}">
              <el-link type="primary" style="margin-right: 10px;" @click="edit(row)">编辑</el-link>
               <el-link type="primary" @click="delByid(row.id)">删除</el-link>
        </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin-top: 10px">
      <el-pagination
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="SizeChange"
        @current-change="CurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { queryPurchase,deletePurchase } from '@/api/platform/purchase.js'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "purchaselist"
});

//表格
const tableData = ref([])
//付款状态
const status = ref('')
//审单状态
const audit = ref('')
//表单同名引用
const tableDataRef=ref(null)
//分页参数
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const billDate = ref("");
//分页大小改变函数
let SizeChange = sc => {
  page.value = 1;
  pageSize.value = sc;
  init();
};

//路由对象
const router=useRouter()

//增加
function add() {
router.push("/purchase/index");
}
//页码改变函数
let CurrentChange = ch => {
  page.value = ch;
  init();
};

//多选删除采购单
function delPurchase() {
  let data = tableDataRef.value.getSelectionRows();
  if (data.length == 0) {
      ElMessage({
    message: '请选择要删除的采购单！',
    type: 'warning',
    plain: true
  })
  }
  data.forEach(d => {
    del(d.id)
  })
  init()
}

//单个删除
 function delByid(id) {
   del(id);
   init();
}

//删除
async function del(id) {
 let res = await deletePurchase({id});
  if (res.code == 200) {
      ElMessage({
    message: '删除成功.',
    type: 'success',
    plain: true,
  })
  } else {
     ElMessage({
    message: '删除失败.',
    type: 'error',
    plain: true,
  })
  }
  init()
}

//编辑
function edit(row) {
  router.push({
    path: "/purchase/index",
    state:row
  })
}

//初始函数
async function init() {
  let res = await queryPurchase({});
  if (res.code == 200) {
    tableData.value = res.data.list;
    total.value=res.data.total
  }
}

//付款状态设置
const statusoptions = [
  {
    value: '1',
    label: '待付款'
  },{
     value: '2',
    label: '部分付款'
  },{
     value: '3',
    label: '已付款'
  }]

//审核状态设置
const auditoptions = [
  {
    value: "1",
    label:"未审核"
  },
   {
    value: "2",
    label:"已审核"
  }, {
    value: "3",
    label:"已拒绝"
  }
]

//生命周期函数
onMounted(() => {
  init();
});
</script>

<style scoped>
.root {
  border: #ebeef5 1px solid;
  background-color: #fff;
  height: 100%;
  padding-left: 20px;
  padding-top: 20px;
}
.ipt {
  width: 220px;
  margin-right: 20px;
}
</style>
